<template>
    <!-- 搜索组件容器 -->
    <div class="search">
        <div class="search_box">
            <!-- 标题 -->
            <div class="title">Search for what you want</div>
            <!-- 表单 -->
            <el-form :model="serachForm" class="search_form">
                <!-- 表单项 -->
                <el-form-item class="search_item">
                    <el-row>
                        <!-- 占位符为21的列，包含搜索框 -->
                        <el-col :span="21">
                            <el-input 
                                v-model="serachForm.key" 
                                @keyup.enter.native="search" 
                                clearable 
                                placeholder="请输入想搜索的产品"
                            ></el-input>
                        </el-col>
                        <!-- 占位符为3的列，包含搜索按钮 -->
                        <el-col :span="3">
                            <el-button 
                                type="success" 
                                @click="search" 
                                icon="el-icon-search" 
                                style="background-color: pink !important;"
                            ></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex"; // 导入Vuex的mapState辅助函数

export default {
    name: 'Search', // 组件名称
    data() {
        return {
            // 表单数据绑定
            serachForm: {
                key: ''
            },
            // 热门搜索数据
            hotSearch: [],
        }
    },
    methods: {
        // 定义搜索方法，触发search事件并清空搜索框
        search() {
            this.$emit('search',this.serachForm.key);
            this.serachForm.key = '';
        },
        // 获取热门搜索数据
        getHotSearch() {
            this.hotSearch = [];
            for (let index = 0; index < 4; index++) {
                let book = this.bookList[Math.floor(Math.random() * this.bookList.length)];
                this.hotSearch.push(book)
            }
        },
        // 查看产品详情
        detail(book) {
            this.$router.push('/book');
            this.$store.commit('DETAIL', book);
        }
    },
    // 组件挂载后执行的方法
    mounted() {
        this.getHotSearch();
    },
    // 使用Vuex的mapState辅助函数来映射状态
    computed: {
        ...mapState({
            bookList: (state) => state.bookList,
        }),
    },
}
</script>

<style scoped>
    .search {
        height: 350px;
        background: url(./images/beijing.jpg);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .search_box {
        width: 450px;
    }

    .title {
        text-align: center;
        color: rebeccapurple;
        font-weight: 800;
        font-size: 40px;
        letter-spacing: 1.5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-bottom: 20px;
    }

    .search_item {
        margin: 0px 0px;
    }

    .hotSearch {
        cursor: pointer;
        text-align: center;
        color: #fff;
        font-size: 15px;
        padding-top: 15px;
    }

    .active:hover {
        color: #ffd04b
    }
</style>